学习Flutter(2)

2023-06-29 12:50| 来源: 网络整理| 查看: 265

今天来学习下Flutter的UI布局。 Flutter 布局的核心机制是 widgets。在 Flutter 中，几乎所有东西都是 widget —— 甚至布局模型都是 widgets。你在 Flutter 应用程序中看到的图像，图标和文本都是 widgets。此外不能直接看到的也是 widgets，例如用来排列、限制和对齐可见 widgets 的行、列和网格。可以通过组合 widgets 来构建更复杂的 widgets 来创建布局。如果熟悉SwiftUI或者React 的话可能更好理解这个概念。当 widget 的状态改变时，它会重新构建其描述（展示的 UI），框架则会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

基础Widgets

Text可以用来在应用内创建带样式的文本。 Row, Column 这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的 flexbox 布局模型设计的。 Stack Stack widget 不是线性（水平或垂直）定位的，而是按照绘制顺序将 widget 堆叠在一起。你可以用 Positioned widget 作为Stack 的子 widget，以相对于 Stack 的上，右，下，左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。 Container Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container可以使用矩阵在三维空间进行转换。

代码结构

项目启动会调用lib/main.dart文件里的main函数

void main() { runApp(const MyApp()); }

runApp() 函数会持有传入的 Widget，并且使它成为 widget 树中的根节点。

在写应用的过程中，取决于是否需要管理状态，你通常会创建一个新的组件继承 StatelessWidget 或 StatefulWidget。 Widget 的主要工作是实现 build() 方法，该方法根据其它较低级别的 widget 来描述这个 widget。框架会逐一构建这些 widget，直到最底层的描述 widget 几何形状的 RenderObject。 StatelessWidget Stateless widgets 是不可变的, 这意味着它们的属性不能改变——所有的值都是最终的。如果无状态Widget里面有子Widget，并且子Widget是有状态的，则子Widget的内容是可以通过setState来更改的。无状态Widget影响的仅仅是自己是无状态的，不回影响他的父Widget和子Widget。 StatefulWidget Stateful widgets 持有的状态可能在widget生命周期中发生变化。

Flutter将StatefulWidget设计成了两个类：也就是你创建StatefulWidget时必须创建两个类：一个类继承自StatefulWidget，作为Widget树的一部分；一个类继承自State，用于记录StatefulWidget会变化的状态，并且根据状态的变化，构建出新的Widget；基本结构如下：

class MyStatefulWidget extends StatefulWidget { @override State createState() { // 将创建的State返回 return MyState(); } } class MyState extends State { @override Widget build(BuildContext context) { return ; } }

参考链接: https://blog.csdn.net/u011578734/article/details/108834678 https://www.jianshu.com/p/da5f8addcf52

【本文地址】

公司简介

联系我们